import Module from "./module";
import * as echarts from "echarts/core";
import {
	DatasetComponent,
	DatasetComponentOption,
	TooltipComponent,
	TooltipComponentOption,
	GridComponent,
	GridComponentOption
} from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([DatasetComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<
	DatasetComponentOption | TooltipComponentOption | GridComponentOption | LineSeriesOption
>;

const option: EChartsOption = {
	tooltip: {},
	grid: {
		left: "10%",
		top: "20%",
		right: "10%",
		bottom: "15%"
	},
	dataset: {
		// 提供一份数据。
		source: [
			["product", "00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
			["温度", 43.3, 65.8, 73.7, 63.3, 75.8, 83.7, 73.3]
		]
	},
	xAxis: {
		type: "category",
		axisLabel: {
			color: "#BBDAFE"
		},
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		}
	},
	// 声明一个 Y 轴，数值轴。
	yAxis: {
		type: "value",
		name: "单位：%",
		nameTextStyle: {
			color: "#FFFFFF"
		},
		axisLabel: {
			color: "#BBDAFE",
			formatter: function (value: any, index) {
				index.toString();
				return value + "%";
			}
		},
		splitLine: {
			lineStyle: {
				type: "dashed",
				color: "#314165",
				opacity: 0.5
			}
		}
	},
	// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
	series: [
		{
			name: "温度",
			type: "line",
			smooth: true,
			seriesLayoutBy: "row",
			lineStyle: {
				color: "#13CEBF",
				width: 3
			},
			itemStyle: {
				opacity: 0
			},
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#13CEBF" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#13CEBF00" //100% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			}
		}
	]
};

export default defineComponent({
	name: "CarbonAnalysis",
	setup() {
		const echartDom = ref();
		onMounted(() => {
			setTimeout(() => {
				let myChart = echarts.init(echartDom.value);
				option && myChart.setOption(option);
				window.onresize = () => myChart.resize();
			}, 500);
		});
		return () => (
			<Module title={"二氧化碳浓度分析"}>
				<div className={"w-full h-full"} ref={echartDom}></div>
			</Module>
		);
	}
});
